import React, { useState } from "react";
import { Form, Input, Button, Dialog } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import "../Register/Register.css";
import { useNavigate } from "react-router-dom";
import axios from "../../request/axios";
var _ = require("lodash");

function Register() {
  const navigate = useNavigate();
  const [value, setValue] = useState("");
  const [visible, setVisible] = useState(false);
  const onFinish = _.debounce((values: any) => {
    // axios
    //   .post("http://xx.com/api/user/register", {
    //     username: values.username,
    //     pssword: values.pssword,
    //   })
    //   .then((rse) => {
    //     console.log(rse);
    //   });
    localStorage.setItem('token','200')
    navigate('/place')
  },1000);
  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <h2>你好，安娜!</h2>
        <p>欢迎回来，大家都很想念你</p>
      </div>
      <Form
        onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button
            style={{ background: "#ff8142", border: "none" }}
            block
            type="submit"
            color="primary"
            size="large"
          >
            登录
          </Button>
        }
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input onChange={console.log} placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="pssword"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <div className="password">
            <Input
              className="input"
              placeholder="请输入密码"
              type={visible ? "text" : "password"}
            />
            <div className="eye">
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Register;
